<template>
  <view class="contianer" :class="'wp-'+platform">
    <u-gap :height="StatusBar" bgColor="#fff"></u-gap>
    <view class="main-pages">
      <view class="mainpageitem active">
        <view class="cu-list menu-avatar shadow-xs bg-white">
          <view class="cu-item arrow">
            <view class="cu-avatar radius lg" :style="'background-image:url('+configs.avatarUrl + '/' + user.id + '.jpg'+');'"></view>
            <view class="content">
              <view>
                <view class="text-cut text-xl">
                  {{user.name}}
                  <view class="cu-tag ">
                    <u-icon v-if="user.gender === 1" color="#2979ff" size="20" name="man"></u-icon>
                     <u-icon v-if="user.gender === 0" color="#fa3534" size="20" name="woman"></u-icon>
                  </view>
                </view>
              </view>
              <view class="text-gray text-sm flex">
                <view class="text-cut">telephone : {{user.telephone}}</view>
              </view>
              <view class="text-gray text-sm flex">
                <view class="text-cut">
                  {{user.motto}}
                </view>
              </view>
            </view>
          </view>
          
        </view>
        <view class="cu-list menu">
        </view>
        <view class="cu-list menu">
          <view class="cu-item arrow" @click="doCheckout()">
            <view class="content">
              <u-icon  class="margin-right-sm" name="/static/customIcon/img/setting.png"  size="25"></u-icon>
              <text class="text-lg">退出</text>
            </view>
          </view>
        </view>
      </view>
    
    </view>
    
  </view>
  
</template>

<script>
  import core from "@/core.js"
  import store from '@/store/index'
  import configs from '@/config/config'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        theme: core.style,
        platform: core.platform,
		configs: configs
      };
    },
    computed: {
      ...mapGetters(['user', 'token'])
    },
    onLoad() {
      uni.setNavigationBarTitle({
      	title:'个人中心'
      });
    },
    methods: {
      naviTo(page, data = {}) {
        return core.navito(page, data);
      },
      doCheckout() {
        const globalData = getApp().globalData
        return core.confirm('退出后需要重新登录', '切换账号', function() {
          store.dispatch('user/logout').then(() => {
            uni.reLaunch({
              url: '/pages/auth/index'
            })
            globalData.socket.close()
          })
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .cu-tag {
    background: none!important;
    height: auto!important;
  }
  .cu-list.menu>.cu-item .content {
    display: flex;
    align-items: center;
  }
</style>
